<!--
 * @Author: wang_sheshe
 * @Date: 2021-08-16 13:46:45
 * @LastEditTime: 2021-08-17 18:33:49
 * @Description: 红外测温
-->

<template>
	<article class="bg_4dbfae redCapture">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
		</Theader>

		<!-- 列表区域 -->
		<div class="doc-wrapper">
            <div class="content-title">
                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                <span style="margin-left: 0.4rem;">基本信息</span>
            </div>
			<div class="baseInfo">
                <van-field 
                    label="变电站"  
                    readonly 
                    :border="false"
                    v-model="taskDetail.substationName"
                />
                <van-field 
                    label="工作类别" 
                    readonly 
                    :border="false"
                    v-model="taskDetail.type" 
                />
                <van-field 
                    label="计划时间" 
                    readonly 
                    :border="false" 
                    v-model="taskDetail.time" 
                />
                <van-field 
                    label="工作内容" 
                    :border="false"  
                    readonly 
                    v-model="taskDetail.content" 
                />
            </div>
        </div>
        <van-tabs v-model="active">
            <van-tab title="设备类型">
                <div class="mainContent">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item title="主变压器" v-for="(i,index) in 2" :key="index" name="1" class="collapse-item-dev">
                            <div class="dev-title margin15">1#主变 </div>
                            <div class="dev-content margin15"><span>设备状态：<span style="color: #0EB295;">在运</span></span><span>实时电流：10A</span><span>实时负荷：110kv</span> </div>
                            <div class="dev-other margin15">
                                <span style="color: #609CFB;" class="bodder-under">设备台账</span>
                                <span>
                                    <span style="color:#F98D92" class="bodder-under">登记缺陷</span><span class="bodder-under" style="color:#FFAE5F;margin-left: 20px;">登记隐患</span>
                                </span>
                            </div>
                            <div v-for="(item,i) in 2" :key="i" class="margin15">
                                <div class="title-devitem margin15">检测部位-整体</div>
                                <div class="margin15">发热红外图谱</div>
                                <div class="dev-other margin15">
                                    <div v-for="(item,i) in 2" :key="i" style="width: 48%;">
                                        <div><van-image :src="icon.tupu" width="100%" height="100%"></van-image></div>
                                        <div class="dev-other">
                                            <span>IR-0488</span>
                                            <span style="color: #0EB295;" @click="goDetail">智能分析</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="addPic margin15">
                                    <van-icon name="add-o" /> 导入
                                </div>
                                <div class="margin15" style="color: #333333;">图谱分析结果：疑似存在缺陷</div>
                                <div class="dev-other margin15">
                                    <span style="color: #609CFB;" class="bodder-under"></span>
                                    <span>
                                        <span style="color:#F98D92" class="bodder-under">登记缺陷</span><span class="bodder-under" style="color:#FFAE5F;margin-left: 20px;">登记隐患</span>
                                    </span>
                                </div>
                                <div>可见光照片</div>
                                <div class="addPic margin15"><van-icon name="add-o" /> 上传</div>
                                <div class="dev-title margin15">分项结论：</div>
                                <div>
                                    <van-field
                                    v-model="description"
                                    rows="1"
                                    autosize
                                    label=""
                                    type="textarea"
                                    placeholder="请输入结论"
                                    />
                                </div>
                                <div class="dev-title margin15">缺陷描述</div>
                                <div>
                                    <van-field
                                    v-model="description"
                                    rows="1"
                                    autosize
                                    label=""
                                    type="textarea"
                                    placeholder="请输入描述"
                                    />
                                </div>
                                <div>
                                    <van-field v-model="value"  style="border: none;" right-icon="arrow" label="实验仪器" placeholder="请选择" />
                                </div>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </van-tab>
            <van-tab title="间隔单元">
                <div class="mainContent">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item v-for="(i,index) in 2" :key="index" title="电抗器" name="1" class="collapse-item-dev">
                            <div class="dev-title margin15">1#主变 </div>
                            <div class="dev-content margin15"><span>设备状态：<span style="color: #0EB295;">在运</span></span><span>实时电流：10A</span><span>实时负荷：110kv</span> </div>
                            <div class="dev-other margin15">
                                <span style="color: #609CFB;" class="bodder-under">设备台账</span>
                                <span>
                                    <span style="color:#F98D92" class="bodder-under">登记缺陷</span><span class="bodder-under" style="color:#FFAE5F;margin-left: 20px;">登记隐患</span>
        
                                </span>
                                
                               
                            </div>
                            <div v-for="(item,i) in 2" :key="i">
                                <div class="title-devitem margin15">检测部位-整体</div>
                                <div class="margin15">发热红外图谱</div>
                                <div class="dev-other margin15">
                                    <div v-for="(item,i) in 2" :key="i" style="width: 48%;    border: 1px solid #f2f2f2;">
                                        <div ><van-image :src="icon.tupu" width="100%" height="100%"></van-image></div>
                                        <div class="dev-other fenxi">
                                            <span>IR-0488</span>
                                            <span style="color: #0EB295;">智能分析</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="addPic margin15">
                                    <van-icon name="add-o" /> 导入
                                </div>
                                <div style="color: #333333;" class="margin15">图谱分析结果：疑似存在缺陷</div>
                                <div class="dev-other margin15">
                                    <span style="color: #609CFB;" class="bodder-under"></span>
                                    <span>
                                        <span style="color:#F98D92" class="bodder-under">登记缺陷</span><span class="bodder-under" style="color:#FFAE5F;margin-left: 20px;">登记隐患</span>
            
                                    </span>
                                </div>
                                <div class="margin15">可见光照片</div>
                                <div class="addPic margin15"><van-icon name="add-o" /> 上传</div>
                                <div class="dev-title">分项结论：</div>
                                <div>
                                    <van-field
                                    v-model="description"
                                    rows="1"
                                    autosize
                                    label=""
                                    type="textarea"
                                    placeholder="请输入结论"
                                    />
                                </div>
                                <div class="dev-title">缺陷描述</div>
                                <div>
                                    <van-field
                                    v-model="description"
                                    rows="1"
                                    autosize
                                    label=""
                                    type="textarea"
                                    placeholder="请输入描述"
                                    />
                                </div>
                                <div>
                                    <van-field v-model="value" style="border: none;" right-icon="arrow" label="实验仪器" placeholder="请选择" />
                                </div>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </van-tab>
        </van-tabs>
        
        <div class="bottom-btn">
            <div class="submit-btn">提交</div>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "TRedCapture",
		components:{
			Theader
		},
		data() {
			return {
                title: "红外测温",
                taskDetail: {
                    substationName:"东善桥变",
                    type:"红外测温记录",
                    time:"2021/03/21-2021/05/23",
                    content:"红外测温记录填写",
                },
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    tupu: require("../../../../assets/bg-shadow.png"),
                },
                active:"1",
                activeNames:['1'],
                value:"",
                description:"",
                result:""
			}
		},
		computed: {

		},
		methods: {
            
            back(){
                this.$router.go(-1)
            },
            goDetail(){
                this.$router.push({
                    name:"atlasCollection"
                })
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
    }
    .doc-wrapper{
        margin: 0.7rem;
        margin-top: 3.7rem;
        border-radius: 0.3rem;
        background: #fff;
        padding-bottom: 1rem;
    }
    .content-title{
        display: flex;
        padding: 1rem 0;
        margin: 0px 1rem;
        align-items: center;
        background: #fff;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid #F5F7F6;
    }
    .baseInfo /deep/ .van-field__label{
        width: 6.5rem;
        color:#747474;
    }
    .baseInfo /deep/ .van-field__control{
        text-align: right;
        color:#343434;
    }
    .btn{
        width: 80%;
        margin: auto;
        margin-top: 1.5rem;
    }
    .redCapture /deep/ .van-tab--active{
		color: #23B8A0;
    }
    .redCapture /deep/  .tab-title span{
		color:#0EB295;
		margin-right: 10px;
    }
    .redCapture /deep/ .van-tabs {
        position: relative;
        margin: 0 10px;
        border-radius: 3px;
    }
    .redCapture /deep/ .van-tabs__line{
        background-color: #0EB295;
        width: 100px;
        height: 2px;
    }
    .bottom-btn{
        background-color: white;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }
    .submit-btn{
        color: white;
        background: #17B49B;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        margin: 15px;
        text-align: center;
    }
    .mainContent{
        margin: 10px;
        padding: 10px;
        background: white;
        border-radius: 5px;
        height: calc(100% - 400px);
    }
    .redCapture .van-collapse-item{
        border: 1px solid #DFF7F1;
        border-radius: 5px;
    }
    .dev-content,.dev-other{
        display: flex;
        justify-content: space-between;
    }
    .redCapture /deep/  .van-collapse-item__content {
        height: 300px;
        overflow: auto;
        font-size: 12px;
    }
    .addPic{
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        border: 1px solid #DFF7F1;
        text-align: center;
        color: #26BC9F;
    }
    .addPic /deep/ .van-icon{
        font-size: 20px;
        top: 6px;
    }
    .title-devitem{
        color: #333;
        background: #EFF2F3;
        text-align: center;
        height: 28px;
        line-height: 28px;
    }
    .redCapture .collapse-item-dev /deep/ .van-cell.van-field {
        border: 1px solid #f1f1f1;
        height: 50px;
        border-radius: 5px;
        margin-top: 10px;
        border: 1px solid #f3f3ff;
        font-size: 12px;
    }
    .dev-title{
        margin-top: 15px;
    }
    .collapse-item-dev .margin15{
        margin: 15px 0px;
    }
    .bodder-under{
        text-decoration: underline;
    }
    
   .fenxi{
       padding:5px 10px;
   }
</style>
